<template>
	<view>
		<!-- 头像用户名 -->
		<view class="top">
			<image :src="avatar" class="avatar"></image>
			<view class="username">{{ username }}</view>
		</view>
		<!-- 操作 -->
		<view class="bottom">
			<view class="connction" @click="toPublish">
				<text>发布兼职信息</text>
				<image :src="rightImg" style="height: 40rpx; width: 40rpx;"></image>
			</view>
			<view class="divider"></view>
			<view class="employer" @click="toManagement">
				<text>管理发布消息</text>
				<image :src="rightImg" style="height: 40rpx; width: 40rpx;"></image>
			</view>
			<view class="divider"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rightImg: "../../static/images/right.png",
				username: "丰",
				avatar: "../../static/images/head.jpg"
			};
		},

		methods: {
			toManagement() {
				uni.navigateTo({
					url: "/pages/management/management"
				})
			},
			toPublish() {
				uni.navigateTo({
					url: "/pages/publish/publish"
				})
			}
		}
	}
</script>

<style lang="scss">
	.top {
		display: flex;
		// 垂直布局
		flex-direction: column;
		align-items: center;
		background-image: url("https://djcdn.axlxs.com/uploads/userfiles/59/images/pageimg/20210317/59-21031GG0218.jpeg");
		background-size: 100% 100%;
		background-position: 50% 50%;
		background-repeat: no-repeat;

		.avatar {
			height: 150rpx;
			width: 150rpx;
			// 倒角，圆形
			border-radius: 50%;
			margin-top: 50rpx;
		}

		.username {
			margin-top: 10rpx;
			margin-bottom: 50rpx;
			color: white;
		}
	}

	.bottom {
		.divider {
			background: gray;
			width: 100%;
			height: 2rpx;
		}

		.connction,
		.employer,
		.loginout {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;

		}
	}
</style>
